<template>
	<view class="uv-form-item">
		<view class="uv-form-item__body" @tap="clickHandler" :style="[$uv.addStyle(customStyle), {
			flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
		}]">
			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
			<slot name="label">
				<view class="uv-form-item__body__left" v-if="required || leftIcon || label" :style="{
					width: $uv.addUnit(labelWidth || parentData.labelWidth),
					marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
				}">
					<!-- 为了块对齐 -->
					<view class="uv-form-item__body__left__content">
						<!-- nvue不支持伪元素before -->
						<text v-if="required" class="uv-form-item__body__left__content__required">*</text>
						<view class="uv-form-item__body__left__content__icon" v-if="leftIcon">
							<uv-icon :name="leftIcon" :custom-style="leftIconStyle"></uv-icon>
						</view>
						<text class="uv-form-item__body__left__content__label" :style="[parentData.labelStyle, {
							justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
						}]">{{ label }}</text>
					</view>
				</view>
			</slot>
			<view class="uv-form-item__body__right">
				<view class="uv-form-item__body__right__content">
					<view class="uv-form-item__body__right__content__slot">
						<slot />
					</view>
					<view class="item__body__right__content__icon">
						<slot name="right" />
					</view>
				</view>
			</view>
		</view>
		<slot name="error">
			<uv-transition :show="true" :duration="100" mode="fade" v-if="!!message && parentData.errorType === 'message'">
				<text class="uv-form-item__body__right__message" :style="{
					marginLeft: $uv.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
				}">{{ message }}</text>
			</uv-transition>
		</slot>
		<uv-line v-if="borderBottom"
			:color="message && parentData.errorType === 'border-bottom' ? '#f56c6c' : '#d6d7d9'"></uv-line>
	</view>
</template>
<script>
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
import props from './props.js';
/**
 * Form 表单
 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
 * @tutorial https://www.uvui.cn/components/form.html
 * @property {String}			label			input的label提示语
 * @property {String}			prop			绑定的值
 * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
 * @property {String | Number}	labelWidth		label的宽度，单位px
 * @property {String}			rightIcon		右侧图标
 * @property {String}			leftIcon		左侧图标
 * @property {String | Object} leftIconStyle 左侧图标的样式
 * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
 *
 * @example <uv-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></uv-form-item>
 */
export default {
	name: 'uv-form-item',
	emits: ['click'],
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 错误提示语
			message: '',
			parentData: {
				// 提示文本的位置
				labelPosition: 'left',
				// 提示文本对齐方式
				labelAlign: 'left',
				// 提示文本的样式
				labelStyle: {},
				// 提示文本的宽度
				labelWidth: 45,
				// 错误提示方式
				errorType: 'message'
			}
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			// 父组件的实例
			this.updateParentData()
			if (!this.parent) {
				this.$uv.error('uv-form-item需要结合uv-form组件使用')
			}
		},
		// 获取父组件的参数
		updateParentData() {
			// 此方法写在mixin中
			this.getParentData('uv-form');
		},
		// 移除uv-form-item的校验结果
		clearValidate() {
			this.message = null
		},
		// 清空当前的组件的校验结果，并重置为初始值
		resetField() {
			// 找到原始值
			const value = this.$uv.getProperty(this.parent.originalModel, this.prop)
			// 将uv-form的model的prop属性链还原原始值
			this.$uv.setProperty(this.parent.model, this.prop, value)
			// 移除校验结果
			this.message = null
		},
		// 点击组件
		clickHandler() {
			this.$emit('click')
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.uv-form-item {
	@include flex(column);
	font-size: 14px;
	color: $uv-main-color;

	&__body {
		@include flex;
		padding: 10px 0;

		&__left {
			@include flex;
			align-items: center;

			&__content {
				position: relative;
				@include flex;
				align-items: center;
				padding-right: 10rpx;
				flex: 1;

				&__icon {
					margin-right: 8rpx;
				}

				&__required {
					position: absolute;
					left: -9px;
					color: $uv-error;
					line-height: 20px;
					font-size: 20px;
					top: 3px;
				}

				&__label {
					@include flex;
					align-items: center;
					flex: 1;
					color: $uv-main-color;
					font-size: 15px;
				}
			}
		}

		&__right {
			flex: 1;

			&__content {
				@include flex;
				align-items: center;
				flex: 1;

				&__slot {
					flex: 1;
					/* #ifndef MP */
					@include flex;
					align-items: center;
					/* #endif */
				}

				&__icon {
					margin-left: 10rpx;
					color: $uv-light-color;
					font-size: 30rpx;
				}
			}

			&__message__box {
				height: 16px;
				line-height: 16px;
			}

			&__message {
				margin-top: -6px;
				line-height: 24px;
				font-size: 12px;
				color: $uv-error;
			}
		}
	}
}
</style>